<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href="./static/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./static/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="./static/css/font-awesome.min.css" rel="stylesheet">
    <link href="./static/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="./static/plugins/datatables/datatables.min.css" rel="stylesheet">
    <link href="./static/plugins/blueimp/blueimp-gallery.min.css" rel="stylesheet">
    <link href="./static/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="./static/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <link href="./static/css/animate.css" rel="stylesheet">
    <link href="./static/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="./static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./static/plugins/bootstrap/bootstrap.min.js"></script>
</head>
<body class="fixed-sidebar no-skin-config full-height-layout">
<div id="wrapper" v-cloak>
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span class="img-thumb"><strong class="font-bold">{{user.company}}</strong></span>
                        <a href="javascript:">
                            <span class="clear">
                                <span class="block m-t-xs"> <strong class="font-bold">{{type[user.type]}}</strong></span>
                            </span>
                        </a>
                    </div>
                </li>
                <li>
                    <a href="/home.html"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-info-circle"></i> <span class="nav-label">基本信息</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="user.html">个人信息</a></li>
                        <li><a href="verify.html">账号认证</a></li>
                        <li><a href="finance.html">财务明细</a></li>
                        <li v-if="user.is_root>0"><a href="employee.html">员工账号</a></li>
                        <li><a href="pwd.html">修改密码</a></li>
                        <li><a href="address.html">收货地址</a></li>
                    </ul>
                </li>
                <li v-if="user.type!=2">
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">询价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list.html">询价单</a></li>
                        <li><a href="enquiry.html">我要询价</a></li>
                    </ul>
                </li>
                <li v-else>
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">报价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list_supply.html">未报价</a></li>
                        <li><a href="offer_sheet.html">已报价</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="index.html"><i class="fa fa-first-order"></i> <span class="nav-label">订单管理</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li class="active"><a href="order_list.html">订单列表</a></li>

                    </ul>
                </li>
                <li>
                    <a onclick="logout()"><i class="fa fa-sign-out"></i> <span class="nav-label">退出登录</span></a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-success" href="#"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li class="m-r">
                        <span class="m-r-sm text-danger font-bold welcome-message" id="nav-title">{{user.name}}&nbsp;</span><span>{{user.company}}&nbsp;{{user.zone}}</span>
                    </li>
                    <li class="dropdown m-r">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false">
                            <i class="fa fa-bell"></i> <span class="label label-danger" v-if="msgbox.total">{{msgbox.total}}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts">
                            <li v-if="msgbox.daifahuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=200'">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> 您有<strong>{{msgbox.daifahuo}}</strong>个待发货订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifahuo"></li>
                            <li v-if="msgbox.daifukuan">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daifukuan}}</strong>个待付款订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifukuan"></li>
                            <li v-if="msgbox.daishouhuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=300'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daishouhuo}}</strong>个订单待收货
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daishouhuo"></li>
                            <li v-if="msgbox.baojiazhong && user.type==1">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list.html?status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.baojiazhong}}</strong>个报价中询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.baojiazhong && user.type==1"></li>
                            <li v-if="msgbox.daibaojia">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list_supply.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daibaojia}}</strong>个待报价询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daibaojia"></li>
                            <li v-if="msgbox.weitongguo">
                                <a href="javascript:parent.document.getElementById('main').src='offer_sheet.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.weitongguo}}</strong>个报价未通过
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a onclick="logout()">
                            <i class="fa fa-sign-out"></i> 安全退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <!--面包屑-->
        <div class="row wrapper border-bottom white-bg p-h-sm">
            <div class="col-lg-10">
                <ol class="breadcrumb">
                    <li class="active">
                        订单管理
                    </li>
                    <li class="active">
                        <strong>订单列表</strong>
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
            <div class="ibox-content m-b-sm border-bottom p-m-10">
                <div class="row" id="search-bar">
                    <form id="top-search">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="order_status">订单状态</label>
                                <select id="order_status" class="form-control">
                                    <option value="0">全部</option>
                                    <option value="100" v-if="user.type!=2">待付款</option>
                                    <option value="200">待发货</option>
                                    <option value="300">待收货</option>
                                    <option value="400">已完成</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label class="control-label">支付时间</label>
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="form-control" id="start_on" value="">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="form-control" id="end_on" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="brand">品牌</label>
                                <input type="text" id="brand" value="" placeholder="品牌" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="insurer">保险公司</label>
                                <input type="text" id="insurer" value="" placeholder="保险公司" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="carnumber">车牌号</label>
                                <input type="text" id="carnumber" value="" placeholder="车牌号" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="vin">车架号</label>
                                <input type="text" id="vin" value="" placeholder="车架号" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="control-label" for="report_number">报案号</label>
                                <input type="text" id="report_number" value="" placeholder="报案号" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <button type="button" class="btn btn-success btn-block" onclick="table.ajax.reload()">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="ibox">
                        <div class="ibox-content">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./static/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript" src="./static/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="./static/plugins/datatables/datatables.min.js"></script>
<script type="text/javascript" src="./static/js/slimscroll.min.js"></script>
<script type="text/javascript" src="./static/js/metisMenu.js"></script>
<script type="text/javascript" src="./static/js/inspinia.js"></script>
<script type="text/javascript" src="./static/plugins/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="./static/plugins/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/spin.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.jquery.min.js"></script>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/main.js"></script>
<script>
    var table, user = getItem('info'), init = true;
    var vm = new Vue({
        el: '#wrapper',
        data: {
            user: {},
            list: [],
            type: {"1": "修理厂", "2": "配件商", "3": "保险公司"},
            msgbox: {},
        },
        created: function () {
            this.user = user;
            var self = this;
            $.ajax({
                type: 'POST',
                url: api + 'user/msgNum',
                dataType: 'json',
                success: function (data) {
                    if (data.ret == 0) {
                        self.msgbox = data.data;
                    }
                },
            });
        }
    });

    $(function () {
        table = $('#table').DataTable({
            autoWidth: false,
            serverSide: true,
            pageLength: 10,
            responsive: true,
            processing: false,
            order: [[1, 'desc']],
            ordering: false,
            bInfo: true,//不显示分页信息
            language: {
                info: "当前显示第 _START_ 至 _END_ 条, 共 _TOTAL_ 条记录",
                emptyTable: '没有订单记录哦',
                lengthMenu: "每页显示 _MENU_ 条",
                infoFiltered: "",
                sZeroRecords: "没有匹配结果",
                search: "<span class='media-middle'>自动搜索</span>",
                searchPlaceholder: '商品名称',
                loadingRecords: "载入中...",
                processing: "<img src='/static/image/ajax-loader.gif'>",
                oAria: {
                    "sSortAscending": ": 升序排列",
                    "sSortDescending": ": 降序排列"
                },
                oPaginate: {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                }
            },
            dom: '<"html5buttons"B>Tgtipr',
            buttons: [],
            ajax: function (data, callback, settings) {
                if (init) {
                    var status = getUrlParam('order_status');
                    if (!isNaN(status)) {
                        document.getElementById('order_status').value = parseInt(status);
                    }
                    init = false;
                }

                var param = {
                    orders_filter: {
                        order_status: document.getElementById('order_status').value,
                        start_on: document.getElementById('start_on').value,
                        end_on: document.getElementById('end_on').value,
                        brand: document.getElementById('brand').value,
                        insurer: document.getElementById('insurer').value,
                        carnumber: document.getElementById('carnumber').value,
                        vin: document.getElementById('vin').value,
                        report_number: document.getElementById('report_number').value,
                    }
                };
                if (param.orders_filter.order_status == 200) {
                    if (user.type == 2) {
                        param.status = 0;
                    }
                } else if (param.orders_filter.order_status == 300) {
                    if (user.type == 2) {
                        param.status = 1;
                    }
                } else if (param.orders_filter.order_status == 400) {
                    if (user.type == 2) {
                        param.status = 2;
                    }
                }

                param.pagesize = data.length;
                param.page = (data.start / data.length) + 1;//当前页码
                if ($.trim(data.search.value)) {
                    param.keywords = data.search.value;//搜索词
                }

                var url;
                switch (user.type) {
                    case 1:
                        url = url = api + "repair/myOrders";
                        break;
                    case 2:
                        url = url = api + "provider/myOrders";
                        break;
                    case 3:
                        url = url = api + "insurer/myOrders";
                        break;
                    default:
                        toastr.warning('用户身份错误');
                        return;
                }

                $.ajax({
                    type: "POST",
                    url: url,
                    cache: false,   //禁用缓存
                    data: param,    //传入组装的参数
                    success: function (result) {
                        checkToken(result);
                        //封装返回数据
                        setTimeout(function () {
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.data.total;//返回数据全部记录
                            returnData.recordsFiltered = result.data.total;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.data.rows;//返回的数据列表
                            callback(returnData);
                        }, 50);
                    }
                });
            },
            columns: [
                {data: "order_no", title: '订单编号',},
                {
                    data: "car_brand", title: '品牌', render: function (data) {
                        return data.brand;
                    }
                },
                {data: "car_model", title: '车型',},
                {data: "vin_code", title: "车架号", className: "text-center"},
                {data: "car_number", title: "车牌号", className: "text-center"},
                {data: "created_at", title: "下单日期"},
                {
                    data: "company", title: "询价方",
                    render: function (data) {
                        return data.name + ' ' + data.zone;
                    }
                },
                // {
                //     data: "order_type", title: "订单类型", className: "text-center",
                //     render: function (data) {
                //         var str = '保险询价';
                //         if (data) {
                //             str = '自主询价';
                //         }
                //         return str;
                //     }
                // },
                {
                    data: "amount",
                    title: "订单金额", render: function (data, type, row) {
                        if (user.type == 2) {
                            return row.fee;
                        }
                        return data;
                    }
                },
                {
                    data: "status", title: "订单状态",//100:待支付 200:已支付、待发货 300:已发货 400:已收货,订单完成 500:已取消;
                    className: "text-center",
                    render: function (data, type, row) {
                        var str = '<span class="badge ';
                        switch (data) {
                            case 100:
                                str += '">';
                                break;
                            case 200:
                                str += 'badge-success">';
                                break;
                            case 300:
                                str += 'badge-primary">';
                                break;
                            case 400:
                                str += 'badge-success">';
                                break;
                            case 500:
                                str += 'badge-danger">';
                                break;
                        }
                        str += (row.status_name + '</span>');
                        return str;
                    }
                },
                {
                    data: "order_no",
                    title: "操作",
                    className: "text-right",
                    render: function (data, type, row) {
                        var str = '';
                        if (user.type == 2) {
                            if (row.status == 200) {
                                str = '<a class="btn btn-success btn-xs btn-outline m-r" href="order_detail_provider.html?order_no=' + data + '">发货</a>';
                            }
                            return str + '<a class="btn btn-primary btn-xs btn-outline" href="order_detail_provider.html?order_no=' + data + '">查看详情</a>';
                        } else {
                            if (row.status == 100) {
                                str = '<a class="btn btn-success btn-xs btn-outline m-r" href="pay.html?order_no=' + data + '">立即支付</a>';
                                str += '<a class="btn btn-danger btn-xs btn-outline m-r onclick=cancelOrder(' + row.id + ')">取消订单</a>';
                            }
                            return str + '<a class="btn btn-primary btn-xs btn-outline" href="order_detail.html?order_no=' + data + '">查看详情</a>';
                        }
                    }
                }
            ]
        });
    });

    $('#datepicker input').datetimepicker({
        locale: 'zh-cn',
        format: 'YYYY-MM-DD',
        sideBySide: true,
        showClear: true,
        showClose: true,
    });
</script>
</body>
</html>
